<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 6.创建容器 -->
        <div id="app">
        <p>{{ msg }}</p>
        <p>我叫{{obj.name}},今年{{obj.age}}岁</p>
        </div>
    </body>
    <!-- 2.响应式函数-ref -->
        <!-- 1.将简单/复杂数据变为响应式数据 -->
        <!-- 2.操作ref创建的响应式在js中进行修改时，需要通过先.value再.属性/值来修改属性/值 -->
    <!-- 1.引用Vue3js库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp,ref} = Vue
        // 2.创建应用
        createApp({
            // 3.创建程序入口
            setup() {
                // 4.创建响应对象
                let msg = ref("hello vue")
                let obj = ref({
                    "name": "vue",
                    "age": 18
                })
                // 5.返回响应对象
                return {
                    msg,obj
                }
            }
        }).mount("#app")//7.指向容器


        // 3.reactive和ref的选择
            // 1.reactive：只能用于对象 ref可以用于所有数据
            // 2.当数据是对象，对象键明确个数和名称的情况下，可以使用reactive,其它情况均使用ref
    </script>
</html>